<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="waybill_number"
            label="发货单号"
            width="250">
            </el-table-column>
            <el-table-column
            prop="start_time"
            label="创建时间"
            width="220">
            </el-table-column>
            <el-table-column
            prop="name"
            label="客户名称"
            width="220">
            </el-table-column>
            <el-table-column
            prop="address"
            label="公司地址"
            width="420">
            </el-table-column>
            <el-table-column
            prop="contacts_name"
            label="联系人姓名"
            width="220">
            </el-table-column>
            <el-table-column
            prop="contacts_phone"
            label="联系人电话"
            width="220">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>


        <el-dialog title="修改运单列表" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="发货单号" :label-width="formLabelWidth">
            <el-input v-model="form.waybill_number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="客户信息" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        </el-dialog>


        <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
		</el-pagination>
    </div>
</template>



<script>
import { waybill_get} from '../../api/api.js'
export default {
    data(){
        return{
            paginations:{
                        page_index:1, //当前页
                        total:0, //总数
                        page_size:5, //一页显示多少
                        page_sizes:[5,10,15,20], //每页显示多少条
                        layout:'total, sizes, prev, pager, next, jumper'
                    },
            // 获取所有运单数据 
            allTableData: [],
            // 分页 
            tableData: [],
            // 所属公司
            company_id:'',
            // 编辑
            dialogFormVisible: false,
            form: {
                waybill_number: '',
            
            },
            formLabelWidth: '120px'
        }
    },
    mounted() {
        //获取所属公司
        this.company_id = localStorage.getItem('com_id')
        //运单请求
        this.get_waybill()
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      // 获取运单
      get_waybill(){
          waybill_get({company_id:this.company_id}).then(res=>{
            this.allTableData = res
            console.log(res)
            // 分页配置
            this.setPaginations()

          })
      },
      // 分页配置方法
      setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
    
}
</script>